<template>
  <div class="catalog">
    <div class="catalogTitle">视频选集</div>
    <div class="catalog-contain">
      <div
        class="title-item"
        :class="{ 'active': selectedEpisode === item }"
        v-for="(item, index) in videoList"
        @click="changSelectTitle(item)">
        <img v-if="selectedEpisode === item" src="@/assets/file/playing.gif" class="playing-icon" />
        <span class="title-text">{{ item.videoTitle }}</span>
        <span class="duration">{{ item.duration }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const selectedEpisode = ref();
const emits = defineEmits(['changSelectVideo'])

const changSelectTitle = (item) => {
  selectedEpisode.value = item;
  emits('changSelectVideo',item);
};

const props = defineProps({

  videoList:{
    type:Array,
    required:true
  }
});
</script>

<style scoped>
.catalog {
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  width: 350px;
  height: 500px;
  border-radius: 10px;
  background-color: #F1F2F3;
  padding: 5px;
  overflow: hidden;
}

.catalog:hover {
  overflow: auto;
}

.catalogTitle {
  margin-top: 10px;
  font-size: large;
}

.catalog-contain {
  margin-top: 10px;
  padding-left: 15px;
}

.title-item {
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensure space between text and duration */
}

.title-item:hover {
  background-color: white;
}

.title-item.active {
  color: #00a1d6;
  background-color: white;
  border-radius: 5px;
}

.playing-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.title-text {
  flex-grow: 1; /* Ensure title grows to fill available space */
}

.duration {
  font-size: 12px;
  color: #666;
  margin-left: 10px; /* Adds spacing between the title and duration */
}
</style>
